<template>
	<view class="bacg">
		<view class="forms">
			<u-form :model="form" ref="uForm">
				<u-form-item label="昵称" left-icon="man-add" label-width="200rpx" prop="name">
					<u-input v-model="form.name" />
				</u-form-item>
				<u-form-item label="电子邮箱" left-icon="email" label-width="200rpx" prop="email">
					<u-input placeholder="方便联系您的邮箱地址" v-model="form.email" />
				</u-form-item>
				<u-form-item label="反馈内容" left-icon="edit-pen" label-width="200rpx" prop="edit">
					<u-input v-model="form.edit" placeholder="输入需要反馈的内容或建议" type="textarea" :auto-height="true" />
				</u-form-item>
			</u-form>
			<u-button @click="submit" size='medium'>提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					email: '',
					edit: '',
				},
				rules: {
					name: [{
						required: false,
					}],
					email: [{
						required: true,
						message: '还未输入联系您的邮箱',
					}],
					edit: [{
						required: true,
						message: '还未输入要反馈的内容',
					}],

				}
			};
		},
		methods: {
			submit() {
				let that = this
				if (this.$rules(this.form, this.rules)) {
					uni.showLoading({
						title: '提交中...',
						success: res => {
							setTimeout(() => {
								uni.navigateBack({
								})
							}, 1000)
						}
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.bacg {
		width: 750rpx;
		min-height: 100vh;
		background-image: linear-gradient(to bottom, white, #B9EDF8);

		.forms {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
</style>
